<template>
<div id="views" style="">
  <div>
    <p class="title">旧密码</p>
    <p class="content">
      <input type="password" v-model="oldPws" @input="inputchange(1)" placeholder="请输入旧密码">
    </p>
    <p class="title">新密码</p>
    <p class="content">
      <input type="password" v-model="newPws" @input="inputchange(2)" placeholder="请输入新密码">
    </p>
    <p class="title">再次输入</p>
    <p class="content">
      <input type="password" v-model="newPwsB" @input="inputchange(3)" placeholder="请再次输入新密码">
    </p>
  </div>
  <div class="paddingl_r">
    <button :class="submitClass" @click="edit">确定</button>
  </div>
</div>
</template>
<script>
  import { editPws } from '../../http/api'
  export default {
    name: 'edit_pws',
    data () {
      return{
        introduce:'修改登录密码',
        oldPws:'',
        newPws:'',
        newPwsB:'',
        submitClass: 'submitNot'
      }
    },
    methods:{
      inputchange(){
        this.submitClass = this.oldPws && this.newPws && this.newPwsB ? 'submit' : 'submitNot'
      },
     edit(){
       let thiz = this;
       let toast = require('../../common/js/toast').toast;
       if( this.submitClass == 'submit' ){
         if( this.newPwsB != this.newPws ){
           toast('两次密码不一致');
         }else{
           if( this.newPws.length < 6 ){
             toast('新密码不能小于6位数');
           }else{
             editPws({ new_password : thiz.newPws , password : thiz.oldPws }).then( res =>{
               if( res.code == 200 ){
                 toast('修改成功');
                 this.$store.commit('storageRemove','all');
                 this.$router.replace({path: '/login'})
               }
             });
           }
         }
       }
     }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{
    padding:0 0.3rem;text-align: left;padding-top: .4rem;padding-bottom: 1.7rem;background: #f8f8f8;
    >div{
      background: #fff;padding:0 0.3rem;border-radius: 0.04rem;overflow: hidden;padding-bottom: .3rem;
      .title{
        font-size: .28rem;font-family: 'PingFang-SC-Bold';padding-top: 0.38rem;line-height: 100%;
      }
      .content{
        border-bottom: .02rem solid#E5E5E5;height: 1rem;overflow: hidden;
        input{
          height: 100%;font-size: .32rem;
        }
      }
    }
    >.paddingl_r{
      background: none;margin-top: .38rem;padding:0;padding-bottom: 0.35rem;
      button{
        height: .88rem;line-height: .88rem;
      }
    }
  }
</style>
